<template>
  <div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="数据统计" name="sjtj">
        <el-row>
          <el-col :span="18">
            <div style="width:100%;text-align:center">
              <h1>开发区各村境外人口区域分布图</h1>
            </div>
            <div align="center" id="histogram" style="width:95%; height:700px"></div>
          </el-col>
          <el-col :span="6">
            <div class="tjInfo">
              <h2 style="padding:12px">数据统计</h2>
              <div style="padding:5px">
                 <table  class="userInfoEditTable" style="border-collapse:collapse;background-color:white;" width="100%" cellspacing="0">
                  <tr>
                    <td>地区</td>
                    <td>外籍人口</td>
                  </tr>
                  <tr v-for="(v,index) in area" :key="v" :class="index%2==0?'mycolor':''">
                    <td>{{v}}</td>
                    <td>{{areaData[index]}}</td>
                  </tr>
                </table>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="数据检索" name="sjjs">
        <el-row>
          <el-col :span="3">
            <tree-component @GetNodeValue="GetNodeValue"></tree-component>
          </el-col>
          <el-col :span="21">
            <el-row>
              <el-col :span="8">
                <el-button @click="exportData" style="float:left;" type="success">
                  <img src="../../assets/daoru.png" alt=""> 导出
                </el-button>
                <el-upload action="xxxxxxxxxx" style="text-align:left;display:inline-block;width:150px;height:38px;overflow: hidden;margin-left:10px">
                  <el-button type="success">
                    <img src="../../assets/daochu.png" alt=""> EXCEL导入
                  </el-button>
                </el-upload>
              </el-col>
              <el-col :span="16">
                <div align="right">
                  <!-- <el-button type="primary">
                    <i class="el-icon-plus">添加境外人员</i>
                  </el-button> -->
                  <el-input style="width:200px" v-model="filters.name" placeholder="姓名"></el-input>
                  <el-input style="width:200px" v-model="filters.certifID" placeholder="身份证号"></el-input>
                  </el-select>
                 <el-button type="primary" icon="search" @click="getForeignerInfo">查询</el-button>
                  <el-button type="primary" @click="showAll"><i class="fa fa-refresh fa-lg"></i> 显示所有</el-button>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" style="padding-top:10px">
                <el-table :data="dataList" style="width:100%;">
                  <el-table-column style="width:50px" label="编号" prop="servedPersonID" align="center" fixed>
                  </el-table-column>
                  <el-table-column label="姓名" prop="name" align="center">
                  </el-table-column>
                  <el-table-column label="性别" prop="sex" align="center">
                    <template scope="scope">
                      {{scope.row.sex == 1 ? '男' : '女'}}
                    </template>
                  </el-table-column>
                  <el-table-column label="政治面貌" prop="politics" align="center">
                  </el-table-column>
                  <el-table-column label="身份证号" prop="certifID" width="300px" align="center">
                  </el-table-column>
                  <el-table-column label="出生日期" prop="birthDate" align="center">
                  </el-table-column>
                  <el-table-column label="职业" prop="career" align="center">
                  </el-table-column>
                  <el-table-column label="移动电话" prop="mobileTel" align="center">
                  </el-table-column>
                  <el-table-column label="操作" fixed="right" width="300" align="center">
                    <template scope="scope">
                      <el-button type="text"  size="small" @click="watchDetail(scope.row.certifID)">查看详情</el-button>
                      <el-button type="text" size="small" @click="editDetail(scope.row.certifID)">编辑</el-button>
                      <el-button type="text" size="small" @click="deleteById(scope.row.certifID)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col :span="24" style="margin-top:10px" align="right">
                <el-pagination layout="prev, pager, next" :total="totalInfo" @current-change="handleCurrentChange">
                </el-pagination>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as api from "@/api/realpopulation/index";
import * as api2 from "@/api/zonghezhili/duiwujianshe";

import treeComponent from "../../components/common/treeComponent";
export default {
  components: {
    treeComponent: treeComponent
  },
  data() {
    return {
      activeName: "sjtj",
      histogram: null,
      filters: {
        // 查询表单
        name: null, // 姓名
        netGridID: null,
        certifID: null, //身份证
        page: 1, // 页码
        pageSize: 10 // 页号
      },
      totalInfo: 40, // 页码总数
      dataList: [],
      list: [],
      area: [
        "上杆",
        "马梗",
        "李塔",
        "潘冲",
        "夏林",
        "后河",
        "天乐",
        "玉晨",
        "开发区",
        "墓东"
      ],
      areaData: [510, 128, 100, 394, 290, 330, 220, 357, 400, 300]
    };
  },
  methods: {
    showAll() {
      this.filters.name = this.filters.netGridID = this.filters.certifID = null;
      this.getForeignerInfo();
    },
    GetNodeValue(id) {
      this.filters.netGridID = id;
      this.getForeignerInfo();
    },
    deleteById(id) {
      this.$confirm("是否删除此人记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    editDetail(ID) {
      this.$router.push({ path: "editSyrkPersonInfo", query: { id: ID } });
    },
    watchDetail(ID) {
      this.$router.push({ path: "syrkpersonInfo", query: { id: ID } });
    },
    exportData() {
      // 导出数据
    },
    getForeignerInfo() {
      api2.fetchServedMemberInfo(this.filters).then(res => {
        this.dataList = res.data.queryVO;
        this.totalInfo = res.data.page.totalCount;
      });
    },
    // 翻页
    handleCurrentChange(val) {
      this.filters.page = val;
      this.getForeignerInfo();
    },
    // 绘制柱状图
    drawHistogram(cun, datas) {
      this.histogram = echarts.init(document.getElementById("histogram"));
      this.histogram.setOption({
        color: ["#2E8B57"],
        title: {
          text: "当前境外人员分布图"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          data: cun
        },
        xAxis: [
          {
            type: "category",
            data: cun,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "境外人员",
            type: "bar",
            barWidth: "50%",
            data: datas
          }
        ]
      });
    }
  },
  mounted() {
    if (this.$store.getters.user.userRole != "超级管理员")
      this.filters.netGridID = this.$store.getters.user.netGridID;
    api.getServedHistogramCount("99").then(res => {
      let cun = res.data[0];
      let datas = res.data[1];
      this.drawHistogram(cun, datas);
      this.area = cun;
      this.areaData = datas;
    });
    this.getForeignerInfo();
  }
};
</script>

<style scoped>
.tjInfo {
  /* margin-top: 50px; */
  background-color: aliceblue;
  width: 100%;
  height: 800px;
  padding: 10px;
  /* text-indent: 2em; */
}
.userInfoEditTable,
.userInfoEditTable td {
  /* font-size: 8px; */
  border: 1px solid darkgrey;
  padding: 10px;
  text-align: center;
}
</style>
